{extend name='admin@public/content'}

{block name='content'}
<form onsubmit="return false;" action="" data-auto="true" method="post" class='form-horizontal layui-form' style='padding-top:20px'>
    {if isset($vo['id'])}
    <input type="hidden" name="id" value="{$vo.id}">
    {else}
    <input type="hidden" name="create_at" value="{:date('Y-m-d H:i:s')}">
    {/if}
    <input type="hidden" name="pid" value="{$vo.pid ?: $pid}">

    <div class="form-group">
        <label class="col-sm-2 control-label">小标题：<span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <input type="text" name="title" title="请输入" required placeholder="请输入标题/姓名" value="{$vo.title ?: ''}" class="layui-input">
            <p class="help-block">如‘简介’</p>
        </div>
    </div>
    <div class="hr-line-dashed"></div>

    <div class="form-group">
        <label class="col-sm-2 control-label">类型：
            <br><span class="nowrap">
                <button class="layui-btn layui-btn-normal add" type="button">添加</button>
            </span>
        </label>
        <div class='col-sm-8'>
            <div class="row">
                {if !empty($vo['content']['lists'])}
                {foreach $vo['content']['lists'] as $k=>$v}
                <div class="col-sm-3">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            标题：<input type="text" name="content[lists][{$k}][title]" value="{$v.title}" class="layui-input">
                            内容：<textarea name="content[lists][{$k}][content]" rows="1" class="layui-textarea">{$v.content}</textarea>
                        </div>
                        <div class="panel-footer text-right">
                            <span class="layui-badge layui-bg-blue down">下移</span>
                            <span class="layui-badge layui-bg-blue up">上移</span>
                            <span class="layui-badge del">删除</span>
                        </div>
                    </div>
                </div>
                {/foreach}
                {else}
                <div class="col-sm-3">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            标题：<input type="text" name="content[lists][0][title]" value="" class="layui-input">
                            内容：<textarea name="content[lists][0][content]" rows="1" class="layui-textarea"></textarea>
                        </div>
                        <div class="panel-footer text-right">
                            <span class="layui-badge layui-bg-blue down">下移</span>
                            <span class="layui-badge layui-bg-blue up">上移</span>
                            <span class="layui-badge del">删除</span>
                        </div>
                    </div>
                </div>
                {/if}
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">内容图片：<span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <textarea name="content[content]" required placeholder="请输入" class="layui-textarea">{$vo.content.content ?: ''}</textarea>
            <p class="help-block"></p>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-sm-8 col-sm-offset-2">
        <div class="layui-form-item text-left">
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
</form>

{/block}
{block name="script"}
<script>
    var key;
    $(function () {
        key = $('.row .col-sm-3').length-1;
    })

    $('.add').on('click',function () {
        key++;
        var html_str = `<div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    标题：<input type="text" name="content[lists][${key}][title]" value="" class="layui-input">
                    内容：<textarea name="content[lists][${key}][content]" rows="1" class="layui-textarea"></textarea>
                </div>
                <div class="panel-footer text-right">
                <span class="layui-badge layui-bg-blue down">下移</span>
                <span class="layui-badge layui-bg-blue up">上移</span>
                <span class="layui-badge del">删除</span>
            </div>
            </div>
        </div>`;
        $(this).parents('.form-group').find('.row').append(html_str);
        // $('.row').append(html_str);
    })

    $('.row').on('click','.del',function () {
        $(this).parents('.col-sm-3').remove();
    })

    $('.row').on('click','.up',function () {
        var parentsDiv = $(this).parents(".col-sm-3");
        var prev = parentsDiv.prev();
        if(prev.html()!=undefined){
            //prev.before(parentsDiv);
            prev.fadeOut("fast",function(){
                $(this).before(parentsDiv);
            }).fadeIn();
        }
    })

    $('.row').on('click','.down',function () {
        var parentsDiv = $(this).parents(".col-sm-3");
        var next = parentsDiv.next();
        if(next.html()!=undefined){
            //next.after(parentsDiv);
            next.fadeOut("fast",function(){
                $(this).after(parentsDiv);
            }).fadeIn();
        }
    })

    window.form.render();
    //富文本
    require(['ckeditor'],function () {
        window.createEditor('[name="content[content]"]', {height: 500});
    })

</script>
{/block}

